<template>
  <div style="width: 100%">
    <div style="margin-bottom: 10px">
      应用到属性：
      <el-select size="small"
                 v-model="attributeCode"
                 :disabled="disabled?true:item.extendsFlag===1"
                 @change="changeAttribute">
        <template v-for="{columnName,nameCn} in allProperties">
          <el-option :label="nameCn" :value="columnName"></el-option>
        </template>
      </el-select>
    </div>
    <!--        <div>
                <el-button size="small" :disabled="disabled" type="primary" @click="$refs['gdcd'].open(tableData)">
                    选择已有的
                </el-button>
                <el-button size="small" :disabled="disabled" type="danger" @click="remove">
                    清空
                </el-button>

                <div class="showProperties">
                    <template v-for="{label,value} in selectionJson">
                        <div>
                            <span>{{ label }}：</span>
                            <el-input :value="value" size="small" disabled></el-input>
                        </div>
                    </template>
                </div>
            </div>-->
    <avue-crud :option="{...option,header:!noBtn,column,menu:false}"
               :table-loading="loading"
               :data="tableData"
               ref="crud">
      <template slot="menuLeft" v-if="!noBtn">
        <el-button size="small" :disabled="disabled" type="primary" @click="$refs['gdcd'].open(tableData)">
          选择已有的
        </el-button>
        <el-button size="small" :disabled="disabled" type="danger" @click="removeItem(item,'array')">清空
        </el-button>
      </template>
    </avue-crud>

    <get-data-common-dialog title="选择已有编码配置"
                            ref="gdcd"
                            url="/api/manager-api/mx-code-rule/workingList"
                            :limit="1"
                            :column="column"
                            :source-data="tableData"
                            @addToList="addToList">
    </get-data-common-dialog>
  </div>
</template>
<script>
import GetDataCommonDialog from "@/views/DMDComponent/getDataCommonDialog.vue";
import index from "../index"
import * as api from "@/api/modulManage/entity";
import {getCodeCon} from "@/api/modulManage/entity";

export default {
  name: "codeRules",
  components: {GetDataCommonDialog},
  mixins: [index],
  inject: ["temp"],
  props: {
    option: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      loading: false,
      tableData: [],
      column: [
        {
          label: '中文名称',
          prop: 'nameCn',
          overHidden: true,
        },
        {
          label: '编码标识',
          prop: 'name',
          overHidden: true,
        },
        {
          label: "创建时间",
          prop: "createTime",
          overHidden: true,
        },
        {
          label: "修改时间",
          prop: "modifyTime",
          overHidden: true,
        }
      ],

      attributeCode: "",

      allProperties: []
    }
  },
  methods: {
    validate() {
      if (this.tableData.length === 0) {
        return {state: false, msg: "编码规则配置"}
      }

      if (!this.attributeCode) {
        return {state: false, msg: "应用到属性"}
      }

      return {state: true}
    },

    getAllProperties() {
      let arr = [];
      if (this.formDataAll.extendAttributeList && this.formDataAll.extendAttributeList.length > 0) {
        arr.push(...this.formDataAll.extendAttributeList);
      }
      if (this.formDataAll.extendsAttributeData && this.formDataAll.extendsAttributeData.length > 0) {
        arr.push(...this.formDataAll.extendsAttributeData);
      }
      this.allProperties = arr;
    },
    addToList(v) {
      let obj = v[0];
      Object.assign(obj, {
        type: this.temp,
        functionName: obj.name,
        functionType: 2,
        interfaceName: "codable",
        attributeCode: this.attributeCode
      })
      this.tableData = [obj];

      this.addToSettingList(obj);

      this.$refs['gdcd'].close();
    },
    changeAttribute() {
      if (this.formDataAll.typeFunctionSettingList.length > 0) {
        this.formDataAll.typeFunctionSettingList.forEach(item => {
          if (item.interfaceName === "codable") {
            item.attributeCode = this.attributeCode
          }
        })
      }
    }
  },
  watch: {
    show: {
      handler(v) {
        if (v) {
          api.getCodeCon({oid: this.formDataAll.oid, type: this.temp}).then(res => {
            if (res.data.data) {
              this.addToList([this.deepCopy(res.data.data)]);

              this.attributeCode = res.data.data.attributeCode;
              this.changeAttribute();
            }
          })
          this.getAllProperties();
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style scoped lang="scss">
.showProperties {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 20px;

  > div {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;

    > span {
      line-height: 36px;
      display: inline-block;
      width: 150px;
      text-align: right;
    }
  }
}
</style>
